<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Pylickr</title>
	<script type="text/javascript">
	// <![CDATA[
	var result;
	var link_used;
	function loadImage(link)
	{
		link_used = link;
		/*
		getAjax(	"/pylickrimage/"+link.alt.replace("http://static.flickr.com/",""),
					{'showStatus' 	: 'status',
					 'onLoad' 		:  imageOnLoad,
					 'onComplete' 	:  loadTags}
				);*/
		loadTags();
		
	}
	function loadTags()
	{
		var link = link_used;
		var term = document.getElementById('term').value;
		getAjax(	"/pylickrtag/"+link.align+"?terms="+term,
					{'showStatus' 	: 'status',
					 'onLoad' 		:  imageOnLoad,
					 'onComplete' 	:  pasteTag}
				);
	}
	function doSearch()
	{
		var term = document.getElementById('term').value.replace(" ", "%%20");
		var page = document.getElementById('page').value;
		getAjax(	"/pylickrsearch?term="+term+"&page="+page,
					{'showStatus' 	: 'status',
					 'onLoad' 		:  searchOnLoad,
					 'onComplete' 	:  pasteSearch}
				);
		
	}
	function imageOnLoad()
	{
		document.getElementById('viewer').src='/images/ajax-loader.gif';
	}
	function searchOnLoad()
	{
		document.getElementById('gallery').innerHTML='<img src="/images/ajax-loader.gif" alt="loading..."/>';
	}
	function resetPage()
	{
		document.getElementById('page').value='1';
	}
	function pasteImage()
	{
		ajaxImage = "'/images/ajax-loader.gif'";
		//document.getElementById('photoDetails').innerHTML += '<br/><img id="viewer" src="/images/image.jpg?'+Math.floor(Math.random()*9999)+'" alt=""/>';
		document.getElementById('photoDetails').innerHTML += '<br/><img onclick="this.src='+ajaxImage+'; this.src=this.title" id="viewer" src="'+link_used.alt+'" title="'+link_used.alt.replace(".jpg", "_o.jpg")+'" alt=""/>';
		document.getElementById('photoDetails').innerHTML += '<br/><a href="'+link_used.alt.replace(".jpg", "_o.jpg")+'" target="_new">Orginal Size</a>';
	}
	function pasteSearch()
	{
		document.getElementById('gallery').innerHTML = result;
	}
	function pasteTag()
	{
		document.getElementById('photoDetails').innerHTML = result;
		pasteImage();
	}
	function mouseOver(element)
	{
		element.style.cursor = "pointer";
	}
	function mouseOut(element)
	{
		element.style.cursor = "default";
	}
	// ]]>
	</script>
	<script type="text/javascript" src="/scripts/ajax.js"></script>
	<style>
	body
	{
		background-image: url(images/bg.png);
		background-repeat: repeat-x;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	input, button
	{
		border: none;
		margin-bottom: 4px;
	}
	button
	{
		background-color: transparent;
	}
	#logo
	{
		position: absolute;
		top: 0px;
		left: 0px;
	}
	#search
	{
		position: 			absolute;
		left: 				364px;
		top:				38px;
		background-image: 	url(images/tabBg.png);
		background-repeat: 	repeat-x;
		line-height:		10px;
		padding:   			0px;
	}
	#term
	{
		font-size: 12px;
	}
	#gallery
	{
		width: 900px;
		margin: auto;
		text-align: center;
	}
	#status
	{
		position: 			absolute;
		left: 				485px;
		top:				0px;
	}
	#tags
	{
		margin: auto;
		padding: 0px;
		margin-top: 0px;
		text-align: left;
		width: 300px;
	}
	#tags li
	{
		list-style-type: none;
		line-height: 12px;
		font-size: 16px;
		color: blue;
		clear: both;
	}
	img
	{
		margin: 0px;
		padding: 0px;
	}
	#go #next #prev
	{
		color:	blue;
		text-decoration: underline;
	}
	</style>
</head>
<body>
	
	<img id="logo" src="/images/PylickrSreachlogo.png" align="middle"/><p id="status"></p>
	<div id="search"><div>
		<img src="images/tabStart.png" />
		<button id="sText">Search:</button> 
		<input type="text" id="term" onkeypress="if (event.keyCode == 13) {document.getElementById('page').value=1; doSearch();}">
		<input type="hidden" id="page" value="1">
		<button id="go" onclick="resetPage(); doSearch();">Go!</button>
		<img src="images/tabEnd.png" />
	</div></div>
	<br/><br/><br/><br/>
	<div id="gallery" style=""></div><br/>
	<div style="text-align: center;">
	<div id="photoDetails">
	<img id="viewer"/> 
	</div>
	</div>
	@result@
</body>
</html>